<script lang="jsx" setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import useResetTableRef from '@/hooks/common/resetTableRef';

const [searchParams, resetSearchParams] = useResetTableRef({
  moduleNo: null
});

const searchFormList = [
  {
    type: 'input',
    key: 'prodNo',
    label: '生产型号',
    placeholder: '请输入生产型号',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 5
  }
];

const tableRef = ref(null);

function search() {
  tableRef.value.getData();
}

function reset() {
  resetSearchParams();
  search();
}

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 70,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'moduleNo',
    dataIndex: 'moduleNo',
    title: '生产型号',
    align: 'center',
    checked: true,
    ellipsis: true,
    fixed: 'left',
    width: 160,
    customRender: ({ record }) => {
      return <div class="fonw-800 color-#646cff">{record.moduleNo}</div>;
    }
  },
  // {
  //   key: 'remark',
  //   dataIndex: 'remark',
  //   title: '备注',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   width: 130
  // },
  // {
  //   key: 'location',
  //   dataIndex: 'location',
  //   title: '仓位',
  //   align: 'center',
  //   checked: true,
  //   ellipsis: true,
  //   width: 100
  // },
  {
    key: 'subMatInId',
    dataIndex: 'subMatInId',
    title: '入库批次',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'prodOrderNo',
    dataIndex: 'prodOrderNo',
    title: '工单号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'type',
    dataIndex: 'type',
    title: '物料类别',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'matNo',
    dataIndex: 'matNo',
    title: '物料编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'matName',
    dataIndex: 'matName',
    title: '物料名称',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'specif',
    dataIndex: 'specif',
    title: '物料规格',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 200
  },
  {
    key: 'qty',
    dataIndex: 'qty',
    title: '数量',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 60
  },
  {
    key: 'unit',
    dataIndex: 'unit',
    title: '单位',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 60
  },
  {
    key: 'barcode',
    dataIndex: 'barcode',
    title: '物料批次',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'batchNo',
    dataIndex: 'batchNo',
    title: '生产批号',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'prodDate',
    dataIndex: 'prodDate',
    title: '生产日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120,
    customRender: ({ record }) => {
      return record.prodDate && dayjs(record.prodDate).format('YYYY-MM-DD');
    }
  },
  {
    key: 'expiryDate',
    dataIndex: 'expiryDate',
    title: '失效日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120,
    customRender: ({ record }) => {
      return record.expiryDate && dayjs(record.expiryDate).format('YYYY-MM-DD');
    }
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '制单员',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 120
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '制单日期',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 170,
    customRender: ({ record }) => {
      return record.createDate && dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss');
    }
  }
];
</script>

<template>
  <div class="jl-main-page min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <CommonSearch
      v-model:searchParams="searchParams"
      :form-list="searchFormList"
      :is-search="true"
      @search="search"
      @reset="reset"
    ></CommonSearch>

    <Table
      ref="tableRef"
      v-model:searchParams="searchParams"
      :column="column"
      :show-row-selection="false"
      row-key="id"
      :scroll="{ y: 'auto' }"
      is-init-get-data
      url="/mes/BaseInvsourceoutdetail/select"
      :auto-generate-uuid="true"
    ></Table>
  </div>
</template>

<style lang="scss" scoped></style>
